<template>
  <div class="article_item">
    <div class="item"
         :clickable="isClick">
    </div>
    <van-cell clickable
              :to="{ name:'article', params: { articleId: article.art_id } }"
              class="item">
      <div class="item_left"
           slot="title">
        <p class="van-multi-ellipsis--12">{{article.title}}</p>
        <div class="time">
          <span>{{article.aut_name}}</span>
          <span>{{article.comm_count}}评论</span>
          <span>{{article.pubdate | relativeTime}}</span>
        </div>
      </div>
      <div slot="default">
        <div class="right">
          <van-image :src="article.cover.images[0]"
                     radius="5"
                     height="80"
                     width="80" />
        </div>
      </div>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      isClick: true
    }
  }
}
</script>

<style lang="less" scoped>
.article_item {
  padding: 5px 15px;
}
.item {
  border-radius: 8px;
  .item_left {
    width: 500px;
    p {
      font-size: 30px;
      display: -webkit-box;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      overflow: hidden;
      -webkit-text-overflow: ellipsis;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      box-orient: vertical;
    }
    .time {
      font-size: 20px;
      color: #7d7b7b;
      span {
        margin-right: 22px;
      }
    }
  }
  .right {
    border-radius: 12px !important;
    overflow: hidden;
    .van-image {
      margin-top: 10px;
      /deep/.van-image__img {
        width: 100%;
      }
    }
  }
}
</style>
